When I start developing a new app that uses the Ext library, I first just include everything because it allows for rapid development in the initial stages. I never have to worry about if I’m including the right features. However, as the app matures – queries are added, UI is strengthened, configuration is complexified (yes, I said it) – the pages start to bog down from the massive 500k include.

Splitting the Ext features into individual files allows for two things:

1. Control – You have fine grain control over what code is included, allowing for smaller downloads
2. Flexibility – Having each feature of Ext in its own module allows you to only include what is needed to create unique UI elements

Here’s an example of my Ext libraries for a particularly heavy page:

<script type="text/javascript" src="js/ext-core.js"></script>
<script type="text/javascript" src="js/ext-buttons.js"></script>
<script type="text/javascript" src="js/ext-data.js"></script>
<script type="text/javascript" src="js/ext-dialogs.js"></script>
<script type="text/javascript" src="js/ext-form.js"></script>
<script type="text/javascript" src="js/ext-form-combo.js"></script>
<script type="text/javascript" src="js/ext-layout.js"></script>
<script type="text/javascript" src="js/ext-quicktips.js"></script>
<script type="text/javascript" src="js/Ext.ux.InfoPanel.js"></script>
<script type="text/javascript" src="js/Ext.ux.Accordion.js"></script>

This is stripped from the most feature-rich Ext page I’ve developed to date, and by splitting things out, the JS is down to 380k from 550k. Still large, but significantly smaller than just including everything.

This is easily done by using the Build Your Own Ext page. When you want to add a specific piece of functionality, simply use that page to download it, strip out the core code so you’re left with only the objects you need, and include it in your page.